<template>
  <div>
    <h2 style="text-align: center">保存广告信息</h2>
    <!--表单-->
    <el-form label-width="120px" ref="course">
      <!-- 广告标题 -->
      <el-form-item label="广告标题">
        <el-input type="text" v-model="ad.title" placeholder="课程标题" />
      </el-form-item>

      <!-- 广告封面-->
      <el-form-item label="广告封面">
        <el-upload
          class="avatar-uploader"
          :action="OSS_API + '/oss/uploadImg?dir=adImg'"
          :show-file-list="false"
          :on-success="coverUploadSuccess"
          :before-upload="beforeCoverUpload"
        >
          <img v-if="ad.imageUrl" :src="ad.imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <!-- 广告类型 -->
      <el-form-item label="广告类型">
        <el-select v-model="ad.typeId" filterable placeholder="请选择">
          <el-option
            v-for="item in abTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          />
        </el-select>
      </el-form-item>
      <!-- 广告颜色 -->
      <el-form-item label="广告排序">
        <el-input-number :min="0" v-model="ad.sort" controls-position="right" />
      </el-form-item>
      <!-- 广告价格 -->
      <el-form-item label="广告背景颜色">
        <div class="block">
          <el-color-picker v-model="ad.color"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="save" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { findByIdAd, createAd, updateAd } from "@/api/cms/ad";
import { getListAbType } from "@/api/cms/adType";
import ImageCropper from "@/components/ImageCropper/index";
import PanThumb from "@/components/PanThumb/index";

export default {
  components: { ImageCropper, PanThumb },
  name: "save",
  data() {
    return {
      // 上传头像的弹框
      imagecropperShow: false,
      // 广告信息
      ad: {
        id: null,
        title: "",
        typeId: null,
        color: "",
        linkRrl: "",
        sort: 0,
        imageUrl: '',
      },
      // id
      id: null,
      // 地址
      OSS_API: "http://localhost:7000",
      abTypeList: [],
    };
  },
  created() {
    // 判断创建课程还是修改课程
    this.ifAd();
    // 查询全部的广告类型
    this.getListAbType();
  },
  methods: {
    // 查询全部的广告类型
    async getListAbType() {
      let result = await getListAbType();
      this.abTypeList = result.data;
    },
    // 查询所有的科目
    async findSubject() {
      let result = await findAllSubject();
      if (result.code !== 20000) {
        this.$message.error("加载科目失败，请稍后重试");
        return false;
      }
      this.subjectOneList = result.data;
    },
    // 提交请求
    async save() {
      if (this.id) {
        // 修改
        await this.updateAd();
      } else {
        // 添加
        await this.saveAd();
      }
    },
    // 创建课程
    async saveAd() {
      // 发送请求创建课程
      let result = await createAd(this.ad);
      if (result.code === 20000) {
        // 路由跳转
        this.$router.push({ path: "/cms/list/" });
      } else {
        this.$message.error("保存失败");
      }
    },
    // 修改课程
    async updateAd() {
      let result = await updateAd(this.ad);
      if (result.code === 20000) {
        // 路由跳转
        this.$router.push({ path: "/cms/list/" });
      } else {
        this.$message.error("保存失败");
      }
    },
    // 创建课程数据回显
    async echoAd() {
      let result = await findByIdAd(this.id);
      if (result.code !== 20000) {
        this.$message.error("数据加载异常，请稍后重试！");
        return false;
      }
      // 回显数据
      this.ad = result.data;
    },
    // 判断修改还是创建
    async ifAd() {
      // 获取路由的参数
      if (this.$route.params && this.$route.params.id) {
        this.id = this.$route.params.id;
        // 数据回显
        await this.echoAd();
      } else {
        // 路由没有随带id
        this.id = null;
      }
    },
    // 获取全部的讲师
    async findAllTeacher() {
      let result = await findAllTeacher();
      if (result.code !== 20000) {
        this.$message.error("获取讲师失败，请稍后重试！");
        return false;
      }
      this.teachers = result.data;
    },
    // 上传广告封面
    coverUploadSuccess(res, file) {
      if (res.code === 20000) {
        this.$message.success("上传成功！");
        this.ad.imageUrl = res.data;
        return false;
      }
      this.$message.error("上传失败," + res.data);
    },
    // 上传封面之前
    beforeCoverUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" ||
        testmsg === "JPG" ||
        testmsg === "png" ||
        testmsg === "PNG" ||
        testmsg === "bpm" ||
        testmsg === "BPM";
      const isLt50M = file.size / 1024 / 1024 < 10;
      if (!extension) {
        this.$message({
          message: "上传图片只能是jpg / png / bpm格式!",
          type: "error",
        });
        return false; //必须加上return false; 才能阻止
      }
      if (!isLt50M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "error",
        });
        return false;
      }
      return extension || isLt50M;
    },
  },
  watch: {
    // 路由改变时判断id
    $route() {
      this.ifAd();
    },
  },
};
</script>

<style scoped lang="scss">
</style>
